<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="wap-font-scale" content="no">
    <title>评价</title>
    <link type="text/css" rel="stylesheet" href="css/base.css"  />
    <link type="text/css" rel="stylesheet" href="css/evaluate.css" />
    <link type="text/css" rel="stylesheet" href="css/app.css">
    <link type="text/css" rel="stylesheet" href="css/swiper.min.css"/>

    <style>
        .img-taol{ width:100%; padding:10px 0; text-align:center;}
        .img-taol >li{ width:32%; float:left; margin-left:1%;}
        .img-t{ width:100%;}
    </style>


    <style type="text/css">
        .figure-list{
            margin: 0;
            padding: 0;
            margin-left:5px;
        }
        .figure-list:after{
            content: "";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }
        .figure-list li{
            list-style: none;
            display:inline-block;
            width: 30%;
            margin: 0 2% 2% 0;
            position:relative;
        }
        .figure-list figure{
            border: 1px solid #eee;
            width: 100%;
            height: 0;
            overflow: hidden;
            margin: 0;
            padding-bottom: 100%; /* 关键就在这里 */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .figure-del{
            position:absolute;
            right:-8px;
            top:-5px;}
        .figure-list figure img{ width:100%;}
        .figure-list figure a{
            display: block;
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
        }

    </style>
</head>

<body style="background-color: white;">
<header class="header">
    <%--<div class="header-left"><img class="img-home" src="images/icon2.png" /></div>--%>
    <div class="header-center word5 "><a class="header-arrow">评价</a></div>
    <div class="header-right" onclick="_sumbitForm();return false;">评价</div>
</header>
<form id="form">
    <div class="main bot60" style="background:#fff;overflow :scroll;">
        <div class="evaluate_title">${HotelName}</div>
        <input type="hidden" id="ordCode" name="ordCode" value="${OrdCode}">
        <input type="hidden" id="grade" name="grade" value="">
        <div id="starRating">
            <p class="photo">
                <span><i class="high"></i><i class="nohigh"></i></span>
                <span><i class="high"></i><i class="nohigh"></i></span>
                <span><i class="high"></i><i class="nohigh"></i></span>
                <span><i class="high"></i><i class="nohigh"></i></span>
                <span><i class="high"></i><i class="nohigh"></i></span>
            </p>
            <p class="starNum">0.0分</p>

            <div class="l_text">
                <textarea name="remarks" id="remarks" class="text" placeholder="环境很好，很满意！" maxlength="100"></textarea>
                <p>还可以输入<span id="canInput"></span>个字符</p>
            </div>
            <div class="full">
                <section class=" img-section">
                    <div class="z_photo upimg-div clear" >
                        <div id="uploadImageDiv"></div>
                        <section class="z_file fl" onclick="addImage();return false;">
                            <img src="<%=basePath%>images/a11.png" class="add-img" id="initAdd">
                            <input type="file" name="file" id="addImg" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
                        </section>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <%--用于添加图片--%>
    <ul id="textimage"  class="figure-list"> </ul>

    <%--用来展示大图--%>
    <div class="big_img">
    	<img class="img_delete" src="<%=basePath%>/images/img_close.png">
        <div class="swiper-container2">
            <div class="swiper-wrapper">
            </div>
        </div>
        <div class="swiper-pagination2"></div>
    </div>
</form>
<script type="text/javascript" src="js/jquery/jquery.js" ></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="js/artDialog/artDialog.source.js?skin=simple"></script>
<script type="text/javascript" src="js/artDialog/plugins/iframeTools.source.js"></script>
<script type="text/javascript" src="js/evaluate/imgUp.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>

<script>
    var canInput = document.getElementById("canInput");
    var remarks = document.getElementById("remarks");
    //获取可输入最大长度并赋值
    canInput.innerHTML = remarks.maxLength - remarks.value.length;
    //监听input输入事件，oninput，动态获取剩余长度。
    remarks.addEventListener('input',function(){
        canInput.innerHTML  = remarks.maxLength - remarks.value.length;
    });

    var imgServerId = ",";   //用于存储要上传到本地服务器的照片 在微信服务器上的地址列表
    var localIds = ",";   //用于存储要上传到本地服务器的照片 在微信服务器上的地址列表
    var imglen =0;
    function delImg(dom){    //选择图片显示后 点击删除按钮删除图片（DOM 和 上面的图片列表）
    	var serverId= $(dom).attr("serverId");
        localIds=localIds.replace(","+serverId,"");
        $(dom).parent().parent().remove();
        imglen--;
    }
    $(function () {
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '${wxMap.appId}', // 必填，公众号的唯一标识
            timestamp: '${wxMap.timestamp}' , // 必填，生成签名的时间戳
            nonceStr: '${wxMap.nonceStr}', // 必填，生成签名的随机串
            signature: '${wxMap.signature}',// 必填，签名
            jsApiList: [
                'chooseImage','uploadImage','getLocalImgData'//
            ]
        });

        //评分
        var starRating = 0;
        $('.photo span').on('touchend',function () {
            var index = $(this).index()+1;
            $(this).prevAll().find('.high').css('z-index',1)
            $(this).find('.high').css('z-index',1)
            $(this).nextAll().find('.high').css('z-index',0)
            $('.starNum').html((index).toFixed(1)+'分');
            starRating =(index).toFixed(1);
            $("#grade").val(starRating);
        })

        $(".img_delete").on("click",
            function() {
                $(".big_img").css({
                    "z-index": "-1",
                    "opacity": "0"
                });

            });
   /*      $(".big_img").on("click",
            function() {
                $(this).css({
                    "z-index": "-1",
                    "opacity": "0"
                });

            }); */

    });

    function addImage() {
           wx.chooseImage({
               count: 6-imglen, // 默认9
               sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
               sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
               success: function (res) {
                   var localId = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                   if(localId.length == 0){
                       art.dialog.tips('请先选择图片');
                       return;
                   }
                   for(var i=0;i<localId.length;i++){
                       var html = '<li> <div class="figure-del"><img src="images/a7.png" width="26px" height="26px" onclick="delImg(this)" serverId="'+localId[i]+'"> </div><figure onclick="lookBigPic(this);"><img src="'+localId[i]+'"></figure></li>';
                       $("#textimage").append(html);
                       imglen++;
                       localIds+=localId[i]+",";
                   }
               }
           });
           if(imglen>=6){
               $("#initAdd").hidden();
           }
    }
    
    function lookBigPic(obj) {
        var mySwiper = new Swiper('.swiper-container2', {
            loop: false,
            pagination: '.swiper-pagination2',
        });
        var imgBox = $(obj).find("img").attr("src");
        // var i = $(imgBox).index(this);
        $(".big_img .swiper-wrapper").html("")

        // for(var j = 0 ,c = imgBox.length; j < c ;j++){
            $(".big_img .swiper-wrapper").append('<div class="swiper-slide"><div class="cell"><img src="' + imgBox+ '" / ></div></div>');
        // }
        mySwiper.updateSlidesSize();
        mySwiper.updatePagination();
        $(".big_img").css({
            "z-index": 1001,
            "opacity": "1"
        });
        mySwiper.slideTo(i, 0, false);
        return false;
    }
    function upload() {
         if(localIds!=","){
         	 var localList=(localIds.substr(1, localIds.length-1)).split(",");
         	 wx.uploadImage({
	             localId: localList[0],
	             success: function(res) {
	             	imgServerId+=res.serverId+",";
	             	localIds=localIds.replace(","+localList[0],"");
	             	upload();
	             },
	             fail: function(res) {
	                 alert(JSON.stringify(res));
	             }
	         });
         }else{
         	var dataMap = {ordCode:$("#ordCode").val(),grade:Number($("#grade").val()),remarks:$("#remarks").val()};
	        if(imgServerId!=","){
	            dataMap.serverId=imgServerId.substr(1, imgServerId.length-1);
	        }
	        $.ajax({
	            url: "<%=basePath%>order/addEvaluate",
	            type: "post",
	            data: dataMap,
	            success: function (data) {
	                if(data.stateID==0&&data.businessState==0){
	                    art.dialog.tips("操作成功");
	                }else{
	                    art.dialog.tips(data.msgInfo);
	                }
	                setTimeout(window.location.replace('<%=basePath%>order/getAllOrderList?ordState=2'),5000);
	            },
	            error:function(e){
	                art.dialog.tips("添加评论失败，请稍后再试！");
	                //alert(JSON.stringify(e));
	            }
	        });
         }
     
     }
    
    function _sumbitForm(){
        if($("#remarks").val()==null||$("#remarks").val()==""){
            art.dialog.tips("评价不能为空");
            return;
        }
        if( $("#grade").val()==null||$("#grade").val()==0){
            art.dialog.tips("请打分");
            return;
        }
        upload();
    }
</script>

</body>
</html>
